<template>
  <div class="gradient">

    <h1 style="text-align: center;letter-spacing:0.5rem;">车间看板导航栏</h1>
    <el-row>
      <el-col :span="6">
        <div class="grid-content bg-purple">
          <div>
            <h1>转轴车间分类</h1>
            <!--<li>-->
            <!--  <router-link to="ipInfo?isHidden=true">看板websocket监听</router-link>-->
            <!--</li>-->
            <li>
              <router-link to="DashBoard?isHidden=true">汇总看板</router-link>
            </li>
            <li>
              <router-link to="EarlyWarningKanBan?isHidden=true">安灯预警看板</router-link>
            </li>
            <li>
              <router-link to="WorkOrderPlanDashboard?isHidden=true">工单进度看板</router-link>
            </li>
            <li>
              <router-link to="SpindleProductDashboard?isHidden=true">转轴车间生产看板</router-link>
            </li>
            <li>
              <router-link to="SpindleQualityDashboard?isHidden=true">转轴品质看板</router-link>
            </li>
            <li>
              <router-link to="SpindleDeviceDashboard?isHidden=true">转轴车间设备看板</router-link>
            </li>
            <li>
              <router-link to="SpindleWorkshopPerformance?isHidden=true">转轴车间绩效看板</router-link>
            </li>
            <li>
              <router-link to="ProdLineDashboard?isHidden=true">产线生产看板</router-link>
            </li>
            <li>
              <router-link to="ThreeFactoryScadaStateDashboard?isHidden=true">转轴设备状态看板</router-link>
            </li>
            <li>
              <router-link to="produceDataManageBoard?isHidden=true">磨床组系统看板</router-link>
            </li>
            <li>
              <router-link to="ShaftMaterialSystemBoard?isHidden=true">轴料组系统看板</router-link>
            </li>
            <li>
              <router-link to="RotatorDashBoard?isHidden=true">转子组系统看板</router-link>
            </li>
            <li>
              <router-link to="CrankShaftDashBoard?isHidden=true">机轴组系统看板</router-link>
            </li>
            <li>
              <router-link to="PumpSpindleDashBoard?isHidden=true">泵轴组系统看板</router-link>
            </li>
            <li>
              <router-link to="ShaftRotationManagerScreen?isHidden=true">转轴车间生产大屏看板</router-link>
            </li>
          </div>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="grid-content bg-purple-light">
          <div>
            <h1>管壳车间分类</h1>
            <!-- 使用router-link路由到指定页面 但注意需在router index.js下配置对应页面路径-->
            <li>
              <router-link to="CellPackingProduceDashBoard?isHidden=true">管壳车间生产看板</router-link>
            </li>
            <li>
              <router-link to="CellPackingQualityDashBoard?isHidden=true">管壳车间品质看板</router-link>
            </li>
            <li>
              <router-link to="CellPackingPerformance?isHidden=true">管壳车间绩效看板</router-link>
            </li>
            <li>
              <router-link to="CellPackingDeviceDashBoard?isHidden=true">管壳车间设备看板</router-link>
            </li>
            <li>
              <router-link to="CellPackingProductLineDashBoard?isHidden=true">管壳车间产线看板</router-link>
            </li>
            <li>
              <router-link to="AllOperationsDashBoard?isHidden=true">管壳车间系统看板</router-link>
            </li>
            <li>
              <router-link to="GuanKeFactoryScadaStateDashboard?isHidden=true">管壳车间scada看板</router-link>
            </li>
            <li>
              <router-link to="WorkShopProduceManagerScreen?isHidden=true">管壳车间生产大屏看板</router-link>
            </li>
            <li>
              <router-link to="PolishingOperationsDashBoard?isHidden=true">抛光车间系统看板</router-link>
            </li>
            <li>
              <router-link to="PouringDevice?isHidden=true">浇铸车间scada看板</router-link>
            </li>
          </div>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="grid-content bg-purple">
          <div>
            <h1>冲压车间分类</h1>
            <li>
              <router-link to="MetalStampingProduceDashBoard?isHidden=true">冲压车间生产看板</router-link>
            </li>
            <li>
              <router-link to="MetalStampingQualityDashBoard?isHidden=true">冲压车间品质看板</router-link>
            </li>
            <li>
              <router-link to="MetalStampingPerformance?isHidden=true">冲压车间绩效看板</router-link>
            </li>
            <li>
              <router-link to="MetalStampingDeviceDashBoard?isHidden=true">冲压车间设备看板</router-link>
            </li>
            <li>
              <router-link to="MetalStampingProductLineDashBoard?isHidden=true">冲压车间产线看板</router-link>
            </li>
            <li>
              <router-link to="PressingOperationsDashBoard?isHidden=true">冲压车间系统看板</router-link>
            </li>
            <li>
              <router-link to="ExtrusionBilletDashBoard?isHidden=true">冲压车间大屏看板</router-link>
            </li>
          </div>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="grid-content bg-purple-light">
          <div>
            <h1>线圈车间分类</h1>
            <li>
              <router-link to="ColiProduceDashBoard?isHidden=true">线圈车间生产看板</router-link>
            </li>
            <li>
              <router-link to="ColiQualityDashBoard?isHidden=true">线圈车间品质看板</router-link>
            </li>
            <li>
              <router-link to="ColiPerformance?isHidden=true">线圈车间绩效看板</router-link>
            </li>
            <li>
              <router-link to="ColiDeviceDashBoard?isHidden=true">线圈车间设备看板</router-link>
            </li>
            <li>
              <router-link to="ColiProductLineDashBoard?isHidden=true">线圈车间产线看板</router-link>
            </li>
            <li>
              <router-link to="ColiOperationsDashBoard?isHidden=true">线圈车间嵌线组看板</router-link>
            </li>
            <li>
              <router-link to="BadQualityAllDashBoard?isHidden=true">线圈不良品质看板</router-link>
            </li>
            <li>
              <router-link to="VarnishDashBoard?isHidden=true">浸漆组看板</router-link>
            </li>
            <li>
              <router-link to="LineCircleScreenDashBoard?isHidden=true">线圈车间大屏看板</router-link>
            </li>
          </div>
        </div>
      </el-col>
    </el-row>


  </div>
</template>

<script>
export default {
  name: "allUrl",
  methods: {
    enter() {
      this.$router.push('/LineCircleScreenDashBoard')
    }
  }
}
</script>

<style lang="scss" scoped>
li {
  margin-top: 0.5vh;
}

.gradient {
  /* 设置容器尺寸 - 原理1 */
  width: 100vw;
  height: 80vh;
  /* 背景渐变色 - 原理2 */
  background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
  /* 背景尺寸 - 原理3 */
  background-size: 100vw;
  /* 循环动画 - 原理4 */
  //animation: gradientBG 5s ease infinite;
}

/* 动画，控制背景 background-position */
/*@keyframes gradientBG {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}*/


</style>
